import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


//导入全局的css样式文件
import '@/assets/global.less'



Vue.config.productionTip = false

//导入ElementUI
import ElementUI from 'element-ui'
//导入ElementUI
import 'element-ui/lib/theme-chalk/index.css';
//注册ElementUI
Vue.use(ElementUI)


//导入axios
import axios from 'axios'
//配置跟路径
axios.defaults.baseURL = 'http://big-event-vue-api-t.itheima.net'
//将axios实例对象挂载到Vue的原型对象上,在全局Vue文件可以直接获取axios实例
//Vue.prototype--原型对象--> js对象
//使用 new.Vue()--->可以得到实例对象
//实例对象.__proto__ 实例对象 对象原型
// 实例对象 __proto__ = Vue.prototype
Vue.prototype.$http = axios

//添加请求拦截器
//config 获取请求对象的信息

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  console.log('所有的正常的请求在到达服务器之前都会经过这里', config);
  const token = store.state.token
  if (token) {
    config.headers.Authorization = store.state.token
  }
  //config 一定要return 返回出去 去服务器
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

//白名单
const whiteList = ['/login', '/reg']

//添加路由守卫
//beforEach():页面跳转之前都会经过这里
router.beforeEach((to, from, next) => {
  // next() //放行继续 || next(指定要跳转的页面的路径) next('/login)
  console.log('页面跳转之前都会经过这里');
  //to 去哪哪里的对象信息
  console.log('to:去哪里', to.path);
  //from 从哪里来
  console.log('form:从哪儿来', from.path);

  //1 判断是否有token
  const token = store.state.token
  //非空判断
  if (token) {
    //有token,以登录
    console.log('有token,已经登录');
    //2判断是否去登录页
    if (to.path === '/login') {
      console.log('已经登录,直接去首页');
      next('/')
    } else {
      console.log('放行');
      next()
    }
  } else {
    //没有token,没有登录
    console.log('没有token,没有登录');
    //3判断是否是去白名单(不需要权限的页面)
    if (whiteList.includes(to.path)) {
      console.log('拥有白名单,放行');
      next()
    } else {
      console.log('您没有白名单,请先登录');
      next('/login')
    }
  }




})







new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
